<template>
    <div id="poster">
      <el-form 
      
      :model="ruleForm" 
      status-icon
      :rules="rules" 
      ref="ruleForm" 
      label-width="0px" 
      class="registerContainer" 
      label-position="left"
      >
        <h3 class="register_title">
         <el-button @click="toLogin()" style="border: none;">登录</el-button>
          <span>水检测平台注册</span>
        </h3>
        <el-form-item label="" prop="loginName">
            <el-input
            type="text" 
            placeholder="请输入用户名" 
            prefix-icon="el-icon-user"
            autocomplete="off"
            v-model="ruleForm.loginName"
            ></el-input>
        </el-form-item>
        <el-form-item label="" prop="name">
            <el-input
            type="text" 
            prefix-icon="el-icon-user"
            placeholder="请输入网名" 
            autocomplete="off"
            v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="" prop="password">
           <el-input 
           placeholder="登录密码"
           prefix-icon="el-icon-lock"
           type="password" 
           v-model="ruleForm.password" 
           autocomplete="off"
           ></el-input>
        </el-form-item>
        <el-form-item label="" prop="checkPass">
            <el-input 
            placeholder="确认密码" 
            prefix-icon="el-icon-lock"
            type="password" 
            v-model="ruleForm.checkPass" 
            autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item style="text-align: center;">
            <el-button type="primary" @click="submitForm(ruleForm)">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
     </div>
  </template>
  
  <script>


    export default {
        name:'Register',
        data() {
      
          var validatePass = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请输入密码'));
            } else {
              if (this.ruleForm.checkPass !== '') {
                this.$refs.ruleForm.validateField('checkPass');
              }
              callback();
            }
          };
          var validatePass2 = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请再次输入密码'));
            } else if (value !== this.ruleForm.password) {
              callback(new Error('两次输入密码不一致!'));
            } else {
              callback();
            }
          };
          return {
            ruleForm: {
              loginName:'', // 注册用户名
              name: '',// 网名
              password: '',//登录密码
              checkPass:''//确认密码

            },
            // 密码的校验
            rules: {
              loginName:[
                {required: true , message:"请输入用户名" , trigger:'blur'},
                {min:2, max:9,message:'输入长度2-9的字符长度',trigger:'blur'}
              ],
              name:[
                {required: true , message:"请输入网名" , trigger:'blur'},
                {min:2, max:9,message:'输入长度2-9的字符长度',trigger:'blur'}
              ],
              password: [
                { validator: validatePass, trigger: 'blur' }
              ],
              checkPass: [
                { validator: validatePass2, trigger: 'blur' }
              ],
             
            },
            //loading:true
          };
        },
        methods: {
          submitForm(ruleForm){
      /* 
        this.axios.post('http://127.0.0.1:29090/api/user/register',this.ruleForm).then((resp) =>{
          const data = resp.data
          if(data.success){
            this.loginForm = {}
            this.$message({
            message: '登录成功',
            type: 'success'
            });
          }
        }) 
        */
            this.ruleForm = {}
            this.$message({
            message: '注册成功',
            type: 'success'
            });
          },
         
          resetForm(formName) {
            this.$refs[formName].resetFields();
          },
          toLogin(){
            this.$router.push({path:'/Login'})
         
          },
      
        }
        
      
    }
  </script>
  
  <style >
     

     #poster{
       background-position:center;
       
       height: 100%;
       width: 100%;
       /* background-size: cover; */
       background-image: url('@/assets/img/bg.jpg');
       background-size:100% 100%;
       background-repeat:no-repeat;
       position: fixed;
   
     }
    

     .registerContainer{
      background-position: center;
       border-radius: 15px;
       background-clip: padding-box;
      
       padding: 35px 35px 15px 35px;
       width: 350px;
       background: #fff;
       border: 1px solid #eaeaee;
       box-shadow: 0 0 25px #cac6c6;

       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
      
     }
     .register_title{
      text-align: center;
      margin: 0px auto 30px auto;
      color: #505458;
     }
     

  </style>